3.1 Web documents

  1. Motivations
    • Let's open Thompson Rivers University, and try it.
    • Let's open TRU Board Game Playground/, and try it.
    • We can see many things displayed in the window, which can be called web content.
    • Questions are where the web content is stored and what kind of language is used.

  2. What kind of language is used?
    • HyperText Markup Language (HTML)
    • Can you check the source code of http://www.tru.ca?
      • Right button of mouse -> 'View page source'
  3. How to store web document in a file?
    • Format of web document - Hierarchical structure
    • Here is an example. 
      <!DOCTYPE html> <!-- HTML5 -->
<html>
    <head> <!-- In general every HTML element uses two tags (starting tag and ending tag), e.g., <head> and </head>. -->
        ...
    </head>
    <body> <!-- Real web content is here. -->
        <h1>Welcome to the world of wonders!</h1>
        ...
    </body>
</html>
    • Editing web document - Any plain text editor, such as, 'Notepad++'. You can use any plain text editor for this course.
    • If the system does not have Notepadd++, let's try to install Notepad++.
    • Let's try to edit a file with the above content, save it in 'first.html'? (Note that the file name should end with '.html'.) You can double click the file to open and see what will be displayed.
    • Can you check the source code of 'first.html' on your web browser?
    • Can you use 'MS Word' to edit a HTML document?
  4. Where to keep web documents?
    • Generally web server computer systems - In this course, we will use your own flash memory stick.
  5. Trial 1. Let's write your first web document.
    • Run Notepad++ on your computer.
    • Write the followings. 
      <!DOCTYPE html> <!-- HTML5 -->
<html>
    <head>
        <style>
            .center-text { text-align: center; }
        </style>
    </head>
    <body>
        <h1>Welcome to the world of wonders!</h1>
        <hr>
        <h2 class='center-text'>TRU Board Game Playground</h1>
        <h3 class='center-text'>- Computing Science -</h2>
    </body>
</html>
    • Save it with the file name, welcome.html, in your memory stick.
    • Execute welcome.html by doble-clicking it.
    • What happens?
    • Can you open welcome.html with Notepad++ for further editing?
    • Maybe you can try the above example with the followings.



  6. Learning outcomes
    • What language is used to describe the web content?
    • List the two main elements in a HTML document.
    • Use of 'Notepad++' for editing HTML documents.
    • Explain the responsibility of a web server and a web server computer system.